<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改默认计算属性</title>
</head>
<body>
<!--当执行app.fullName="lichee envy"时，setter就会被调用，数据lastName和firstName都会相对更新，视图同样也会更新-->

<!--第一，计算属性可以依赖其他的计算属性；第二，计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据-->
<div id="app">
    姓名：{{ fullName }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            firstName:"Jack",
            lastName:"Green",
        },
        computed:{
            fullName:{
                //getter方法用于读取
                get:function () {
                    return this.lastName+"  "+this.firstName;
                },
                //写入时触发，用于修改数据属性
                set:function (newValue) {
                    var name = newValue.split(" ");
                    this.firstName = name[name.length-1];
                    this.lastName= name[0];
                }
            }
            
        }

    })
</script>
</body>
</html>